<template>
	<view class="pr">
		<view class="background w-max pa" style="border-radius: 0 0 100% 100% /0 0 50rpx 50rpx;">
			<u-navbar :isBack="false" :borderBottom="false" :background="{}" />
			<view class="h200"></view>
		</view>
		<u-navbar :background="{...$background,backgroundSize: '100% calc(100% + 200rpx)'}" :isBack="false"
			:borderBottom="false" :title="masterid?'专属主页':' '" titleColor="#fff">
			<!-- 	<view class="pl20 pr20 flex  w-max" v-if="masterid">
				<view class=""></view>
				<view class="flex1 tc fs32 fw-w color-fff">专属主页</view>
				<view class=""></view>
			</view> -->
			<view class="pl20 pr20 flex  w-max" v-if="!masterid">
				<view class="fs26 color-fff mr20" @click="$jump('./chooseAddress')">
					<text class="line-1 mr10" style="max-width: 200rpx;">{{ $store.city.name || '请选择地址' }}</text>
					<u-icon name="arrow-down-fill"></u-icon>
				</view>
				<u-search placeholder="点击搜索陪诊服务/医院/陪诊师" height="72" bg-color="#fff" class="flex1 " :show-action="false"
					:search-icon-color="$zs || ''" disabled @click="$jump('./search/search')">
				</u-search>
			</view>
		</u-navbar>
		<kefu />
		<view class="p20 pr z-index2">
			<u-swiper :list="data.banner || []" @click="$advJump(data.banner[$event])" name="pic" />
			<view class="h20"></view>
			<u-notice-bar mode="horizontal" :list="data.notice && data.notice.map(e => e.info)" borderRadius="10" />
			<view class="h20"></view>
			<view class="p20 radius20 bg-fff" v-if="data.master&&masterid">
				<master :item="data.master" :border="false" />
			</view>

			<!-- 			<scroll-view scroll-x class="nowrap mt20">
				<view v-for="(item, index) in data.service" :key="index" @click="$goDemo(item)"
					class="text-center mb20 dib mr20" style="min-width: 126rpx;">
					<image :src="item.icon || ''" class="h88 w88" mode="" />
					<view class="color-232323 fs28">{{ item.name }}</view>
				</view>
			</scroll-view> -->

			<view class="fs30" v-if="data.service">
				<swiper :interval="3000" :duration="1000" :indicator-active-color="$zs"
					:indicator-dots="data.service.length>8" :disable-touch="data.service.length<=8"
					:class="data.service.length<=4?'h190':'h350'">
					<swiper-item v-for="(item9,index9) in $tool.splitArr(data.service,8)" :key="index9">
						<view class="tc flex flex-wrap">
							<view class="w25p mt20" @click="$goDemo(item)" v-for="(item,index) in item9" :key="index">
								<image :src="item.icon || ''" class="h88 w88" mode="" />
								<view class="color-232323 ">{{ item.name }}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			
			<view class="flex">
				<image v-for="(item, index) in data.sort1" :key="index" @click="$advJump(item)" :src="item.cover || ''"
					class="flex1 h164 mr20 mt24" mode="" />
			</view>

			<view class=" p20 radius10 bg-fff mt20">
				<view class="flex row-between fs26">
					<view class="fs30 fw-w">当前位置:</view>
					<view class="color-zs" @click="location_city = {}, init()" hover-class="opa7">重新定位</view>
				</view>
				<view class="mt10 flex fw-w">
					<u-icon name="map-fill" :color="$zs" />
					<text>{{ location_city.address || '定位中...' }}</text>
				</view>
			</view>

			<view class="mt20 bg-fff radius20" v-if="tabList.length"
				style="min-height:calc(100vh - 1120rpx - 44px - var(--window-top));">
				<view class="flex list radius20">
					<view class="flex h68 raduis-tab border-tab">
						<view v-for="(item, index) in tabList" :key="index" class="flex row-center pl40 pr40"
							:class="current == index ? 'current_on' : ''" @click="current = index, screenShow = false">
							{{ item.name }}
						</view>
					</view>
				</view>
				<view class="" v-for="(item, index) in tabList" :key="index">
					<block v-if="current===index">
						<hospitalList v-if="item.type == 'yy'" :list="item.list" />
						<masterList v-if="item.type == 'pzs'" :list="item.list" />
					</block>
				</view>
			</view>
		</view>
		<view class="flex row-center pt20 pb40 color-666" v-if="$config.is_company!==0">
			<text>{{$config.company||'©技术支持:河南探迹信息技术有限公司'}}</text>
		</view>

		<u-popup v-model="show" width="600" borderRadius="20" mode="center" z-index="998">
			<view class="p40">
				<view class="fw-w fs32 tc pb30">提示</view>
				<view class="fs30">{{$config.login_tip||'请勿私下与陪诊师联系，否则出现问题，后果自负'}}</view>
				<view class="flex pt40">
					<view class="flex1">
						<u-button type="warning" plain @click="not_tips()">不再提示</u-button>
					</view>
					<view class="w30"></view>
					<view class="flex1">
						<u-button type="warning" @click="show=false">知道了</u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				current: 0, //当前选中导航tab 医院 陪诊师 陪诊机构
				data: '',
				tabList1: [{
						type: 'yy',
						api: '/member/search/hospitalList',
						list: [],
						name: '医院',
						show: 'is_hospital'
					},
					{
						type: 'pzs',
						api: '/member/search/masterList',
						list: [],
						name: '陪诊师',
						show: 'is_master'
					},
				],
				location_city: {
					address: ''
				},
				masterid: '',
			};
		},
		computed: {
			tabList() {
				return this.tabList1.filter(e => {
					if (e.type == 'pzs' && this.masterid) return false
					return true
				})
			}
		},
		watch: {
			current(e) {
				this.getList()
			},
			masterid() {

			}
		},
		onLoad(e) {
			this.$getUser({
				route: 'index'
			}).then(res => {
				if(res.is_login_tip==1) this.show = true
			})
			if (this.$getData('token')) this.init()
		},
		onShow() {
			this.masterid = this.$getData('masterid') || ''
			this.getData()
			this.getList()
		},
		onReachBottom() {
			this.getList('down')
		},
		methods: {
			init() {
				console.log('init');
				this.$location().then(res => {
					this.getCity(res)
				}).catch(err => {
					console.log(err);
					this.location_city.address = '定位失败'
					if (!uni.$store.city) { //没有城市
						this.$showModal('温馨提示', '定位失败,请选择城市').then(res => {
							this.$jump('./chooseAddress')
						})
					} else {
						this.getList()
					}
				})
			},
			not_tips(){
				this.$showModal('不再提示','以后将不弹出此窗口，可在用户设置中重新打开').then(res=>{
					this.show=false
					this.$request('/member/my/editInfo',{is_login_tip:0})
				})
			},
			getData() {
				this.$request('/member/index/index').then(res => {
					let data = res.data || ""
					this.data = data
					this.shareData.title = ''
					if (data.master?.name) {
						this.shareData.title = data.master.name + '的专属主页'
					}
				})
			},
			getCity(params) { //获取当前定位城市信息
				this.$request('/master/commom/locationCity', params).then(res => {
					this.location_city = res.data
					if (!uni.$store.city) { //没有城市
						if (res.data.id) { //默认当前地区
							this.$setData('city', res.data)
							this.getList()
						} else { //当前地区也没有城市
							this.$showModal('温馨提示', '当前城市未开通,请选择其他城市').then(res => {
								this.$jump('./chooseAddress')
							})
						}
					} else {
						this.getList()
					}
				})
			},
			getList(e) {
				let data = this.tabList?.[this.current] || ''
				if (!data) return
				e == 'down' ? this.page++ : this.page = 1
				let params = {
					page: this.page,
				}
				this.$request(data.api, params).then(res => {
					let list = res.data.data
					e == 'down' ? data.list.push(...list) : data.list = list
				})
			},
		},
	}
</script>

<style lang="scss">
	page {}

	.raduis-tab {
		border-radius: 20rpx 0px 30rpx 0px;
	}

	.border-tab {
		border: 1px solid #A6EAEC;

	}

	.list {
		background: linear-gradient(180deg, rgba(9, 199, 202, 0.18) 0%, rgba(255, 255, 255, 0) 100%);
	}

	.current_on {
		height: 100%;
		border-radius: 20rpx 0px 30rpx 0px;
		color: #FFFFFF;
		background: linear-gradient(180deg, $zs 0%, transparentize($color: $zs, $amount: .5) 100%);
	}

	:deep(.u-dropdown__menu__item) {
		justify-content: flex-start !important;
	}
</style>